<template>
  <div>
    <h1>分类页面</h1>
    <div class="content-box">
      <ul class="left">
        <li><router-link to="/Category/Phone">手机</router-link></li>
        <li><router-link to="/Category/MouthRed">口红1</router-link></li>
        <li>口红2</li>
      </ul>
      <div class="right">
        <router-view></router-view>
      </div>
    </div>
    <!-- 底部 -->
    <FooterBar></FooterBar>
  </div>
</template>
  
  <script>
import FooterBar from "@/components/FooterBar.vue";

export default {
  name: "Category",
  components: { FooterBar },
};
</script>
  
  <style scoped>

  .content-box{
    display: flex;
    height: 31.25rem;
  }

  .left{
    width: 5rem;    
    height: 100%;
    border-right: 1px solid gray;
  }

  .left li{
    line-height: 2.5rem;
  }

  .right{
    flex:1
  }
</style>
